<template>
  <div class="user-register">
    <!-- 头部 -->
    <mt-header>
      <router-link to="/WeiPersonal" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="bg">
      <div class="main">
        <!-- 标题文字 -->
        <h2>快速注册</h2>
        <!-- 文本框 -->
        <div class="medile">
          <mt-field
            placeholder="请输入昵称"
            v-model="uName"
            :state="nameState"
            @blur.native.capture="checkName"
          ></mt-field>
          <mt-field
            type="tel"
            placeholder="请输入手机号"
            v-model="uPhone"
            :state="phoneState"
            @blur.native.capture="checkPhone"
          ></mt-field>
          <mt-field
            type="password"
            placeholder="密码至少为6位的数字"
            v-model="uPwd"
            :state="pwdState"
            @blur.native.capture="checkPwd"
          ></mt-field>
          <mt-field
          type="text"
          placeholder="请输入国籍"
          v-model="uCountry"
          @blur.native.capture="checkrepwd"
        ></mt-field>

          <!-- 测试验证码输入框 -->
          <mt-field
            type="text"
            placeholder="请输入验证码"
            v-model="yzm"
            :state="yzmState"
            @blur.native.capture="checkYzm"
          ></mt-field>
          <!-- 测试图片验证码 -->
          <img
            class="yzm-code"
            ref="img_codeRef"
            src="/getcode"
            @click="img_codeClick"
          />
        </div>

        <div class="agreement" >
          <em @click="agree" class="ag1" v-show="selected"></em>
          <em @click="agree1" class="ag2" v-show="!selected"></em>
          <span
            >我已阅读并同意&nbsp;
            <router-link to="/text" target="_blank">用户协议</router-link>
            &nbsp;和&nbsp;
            <router-link to="/text" target="_blank">隐私政策</router-link>
          </span>
        </div>
        <!-- 测试: 删除了禁用:disabled="disabled"-->
        <div style="margin: 50px">
          <van-button
            class="button-item"
            :disabled="state"
            round
            block
            type="info"
            native-type="submit"
            @click="checkForm"
            >立即注册</van-button
          >
        </div>
        <router-link class="last" to="/login">已有账号,去登录</router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-register {
  background-color: #f6f6f6;
  min-height: 100vh;
}
/* 测试图片验证码 */
.yzm-code {
  width: 100px;
  height: 50px;
  opacity: 1;
}

/* 背景图 */
.bg {
  background-image: url(/regist/1.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: 99% 13.5rem;
}
/* 头部 */
.mint-header {
  background-color: #323232;
  color: #ffdd00;
}
/* 文本框和按钮 */
.main {
  width: 70vw;
  margin: 0 auto;
}
/* h2标题 */
.main > h2 {
  position: relative;
  font-weight: 700;
  font-size: 1.48rem;
  line-height: 0.58rem;
  color: #323232;
  z-index: 2;
  padding: 40px 0 10px 0;
}
/* 文本框 */
.main .medile {
  opacity: 0.7;
  border-radius: 10%;
}
.mint-cell-value > .mint-field-core {
  display: block;
  width: 100%;
  height: 1.2rem;
  border: 0 none;
  outline: none;
  font-size: 0.32rem;
  line-height: 1.2rem;
  color: #323232;
  background-color: transparent;
}
/* 同意图标 */
.agreement > .ag1 {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.1rem;
  background-color: transparent;
  background-image: url(/regist/2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 70px;
  top: 440px;
}
.agreement > .ag2 {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.1rem;
  background-color: transparent;
  background-image: url(/regist/3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 70px;
  top: 440px;
}
/* 同意后面的文字 */
.agreement > span {
  font-size: 12px;
  line-height: 12px;
  color: #a8a8a8;
  position: absolute;
  left: 85px;
  top: 440px;
}
.agrennment span a {
  color: #6d6d6d;
}
/* button按钮 */
.van-button--info {
    width: 60%;
    font-weight: bold;
    font-size: 1rem;
    line-height: 0.9rem;
    color: #323232;
    background-color: #fd6;
    border: 0px solid #fd6;
    position: absolute;
    left: 70px;
    top: 462px;
}
/* 按钮禁用 */
/* .van-button--disabled {
  color: #cccccc;
  background-color: #eeeeee;
} */
/* 末尾的链接 */
.main .last {
  font-size: 0.28rem;
  color: #323232;
  position: absolute;
  left: 138px;
  top: 520px;
}
</style>

<script>
export default {
  data() {
    return {
      uName: "", //用于与用户名双向绑定
      nameState: "",
      // 测试手机号 注册成功后每次要不一样
      uPhone: "",
      phoneState: "",
      uPwd: "",
      pwdState: "",
      // 测试国籍
      uCountry: "中国",
      // 测试验证码后面的小勾
      yzmState: "",
      // 测试填入的验证码
      yzm: "",
      // 禁用立即注册
      reGabled: true,
      // 记录绿勾数量
      count: false,
      // 小图标勾选
      selected: true,

      state: true
    };
  },
  watch: {
    // 监听绿勾总数>=4时,取消立即注册btn的禁用
    count() {
      console.log(this.count);
      this.count === 0 || this.count == 4
        ? (this.reGabled = false)
        : (this.reGabled = true);
    },
  },
  methods: {
    // 点击小图标同意勾选
    agree(){
      this.selected=false
      this.state=false
    },
    agree1(){
      this.selected=true
      this.state=true
    },
    // 测试点击图片 获取图片验证码
    img_codeClick() {
      this.$refs.img_codeRef.src = "/getcode?time" + new Date();
    },
    goLog() {
      //测试点击发送验证码
      this.axios.post("/kc/reg", `code=${this.yzm}`).then((res) => {
        console.log(res.data);
      });
    },

    // 测试验证验证码
    checkYzm() {
      //通过格式验证
      if (this.yzm) {
        // 判断是否已经打勾
        if (this.yzmState == "success") {
          // 是 跳出
          return true;
        } else {
          // 否 赋值success
          this.yzmState = "success";
          // count+1
          this.count++;
        }
      } else {
        if (this.yzmState == "error") {
          return false;
        } else {
          this.yzmState = "error";
          this.count--;
        }

        return false;
      }
    },
    // 验证用户名
    checkName() {
      let reg = /^[\u4E00-\u9FA5A-Za-z0-9_]{2,4}$/;
      if (reg.test(this.uName)) {
        if (this.nameState == "success") {
          return true;
        } else {
          this.nameState = "success";
          this.count++;
        }
      } else {
        if (this.nameState == "error") {
          return false;
        } else {
          this.nameState = "error";
          this.count--;
        }
      }
    },
    // 验证用户手机号
    checkPhone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.uPhone)) {
        this.phoneState = "success";
        return true;
      } else {
        this.phoneState = "error";
        return false;
      }
    },
    // 验证用户名密码
    checkPwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.uPwd)) {
        if (this.pwdState == "success") {
          return true;
        } else {
          this.pwdState = "success";
          this.count++;
        }
      } else {
        if (this.pwdState == "error") {
          return false;
        } else {
          this.pwdState = "error";
          this.count--;
        }
      }
    },
    //验证国籍
    checkrepwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.repwd) && this.pwd == this.repwd) {
        if (this.repwdState == "success") {
          return true;
        } else {
          this.repwdState = "success";
          this.count++;
        }
      } else {
        if (this.repwdState == "error") {
          return false;
        } else {
          this.repwdState = "error";
          this.count--;
        }
      }
    },
    // 表单验证
    checkForm() {
      // 判断count===4或count===0
       if (this.checkYzm()&&this.checkName()&&this.checkPwd()&&this.checkPhone()) {
        console.log(`发送请求，执行注册业务。。。`);
        // 发送post请求
        this.axios
          .post(
            "/kc/reg",
            `uCountry=${this.uCountry}&uPhone=${this.uPhone}&uName=${this.uName}&uPwd=${this.uPwd}&yzm=${this.yzm}`
          )
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              //注册成功
              this.$toast(`${res.data.message}`);
              this.$router.push("/login");
            } else if (res.data.code == 202) {
              //测试验证码错误
              this.$toast(`${res.data.message}`);
              //测试刷新验证码
              this.img_codeClick();
            } else if (res.data.code == 203) {
              //测试数据不完整
              this.$toast(`${res.data.message}`);
            } else if (res.data.code == 201) {
              //测试手机号或昵称已存在
              this.$toast(`${res.data.message}`);
            }
          });
      }else{
        
        this.$toast('未填写正确')
      }
    },
  },
  mounted() {
    //测试刷新验证码
    this.img_codeClick();
  },
};
</script>